CSS Animation - mrsekut-p

CSS Animation

アニメーションの名前

@keyframesで定義した名前

animation-duration

アニメーションの持続時間

e.g. 3s

animation-timing-function

アニメーションの速度曲線

e.g. linear, ease

animation-delay

アニメーションが始まるまでの遅延時間

animation-iteration-count

アニメーションの再生回数

infiniteは無限

animation-direction

アニメーションの再生方向

e.g. normal, reverse, alternate

animation-fill-mode

アニメーションが実行される前後の状態

e.g. forwards, backwards

animation-play-state

https://qiita.com/soarflat/items/4a302e0cafa21477707f#css-animationを利用したアニメーションを実装してみる

filter: blur() contrast()

https://speakerdeck.com/yusukemx5/cssanimesiyonfalsekuang-qi?slide=17